<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_head.html"; ?>



<h2>접근성 가이드</h2>

<h3>체크리스트</h3>
<p>대부분의 심사는 IE8을 기준으로 심사합니다.<br />
	참고 : 웹접근성 연구소 <a href="http://www.wah.or.kr/Example/index.asp" title="새창으로 이동" target="_blank">http://www.wah.or.kr/Example/index.asp</a><br />
	참고 : 웹와치 <a href="http://www.webwatch.or.kr" title="새창으로 이동" target="_blank">http://www.webwatch.or.kr</a><br />
	* 웹접근성_개발_가이드라인_웹와치(주).pdf 문서 숙지
</p>
<table class="tbl-type center" cellspacing="0" cellpadding="0" summary="체크리스트항목,체크리스트별 해당팀 UX팀,UI팀,마크업팁,개발팀의 순서로 접근성 체크리스트를 나타낸 표입니다.">
<caption>NWCAG 체크리스트</caption>
<colgroup>
	<col width="7%" />
	<col width="*" />
	<col width="5%" />
	<col width="5%" />
	<col width="8%" />
	<col width="5%" />
</colgroup>
<thead>
	<tr>
		<th scope="colgroup" colspan="2" rowspan="2" class="align-c">체크리스트 항목</th>
		<th scope="colgroup" colspan="4" class="align-c col">체크리스트별 해당팀</th>
	</tr>
	<tr>
		<th scope="col" class="align-c">UX</th>
		<th scope="col" class="align-c">UI</th>
		<th scope="col" class="align-c">마크업</th>
		<th scope="col" class="align-c">개발</th>
	</tr>
</thead>
<tbody class="cklist">
	<tr class="cm">
		<td>1.1.1</td>
		<td class="align-l">이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)에 적절한 대체 텍스트를 제공하는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>1.1.1-1</td>
	<!-- 	<td class="align-l"><a href="1.1.1-1.html">이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)이 사용되는 플랫폼에 대체 텍스트 입력을 위한 입력필드가 마련되어 있는가?</a></td>  -->
		<td class="align-l">[권고] 이미지(그림, 사진, 로고, 차트, 다이어그램, 배경처리된 이미지, 동적으로 제공하는 이미지, 플래시의 Name값 등)를 제공하는 서비스의 운영 어드민에 대체 텍스트 입력을 위한 입력필드가 마련되어 있는가?</td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>1.2.1</td>
	<!-- 	<td class="align-l"><a href="1.2.1.html">정보전달을 위한 영상 및 음성 정보에 텍스트(자막, 원고) 또는 수화를 제공하는가 -->
		<td class="align-l">[권고] 정보전달을 위한 영상 및 음성 정보에 텍스트(자막, 원고) 또는 수화를 제공하는가?</td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>1.3.1</td>
		<td class="align-l">캡차 사용 시, 이미지 캡차 이외에도 다른 대체 수단(음성,이메일,OTP인증 등)을 제공하는가?</td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cd">
		<td>2.1.1</td>
		<td class="align-l">색상, 크기, 방향, 위치, 음향효과 만으로 정보를 전달하고 있는 콘텐츠는 없는가?</td>
		<td></td>
		<td>O</td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>2.2.1</td>
		<td class="align-l">W3C Validation을 통과하는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>2.3.1</td>
		<td class="align-l">&lt;table>에 &lt;caption> 및 &lt;summary>가 적절하게 선언되었는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>2.3.2</td>
		<td class="align-l">&lt;thead>,&lt;tbody>,&lt;tfoot>으로 그룹핑 되어 있는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>2.3.3</td>
		<td class="align-l">표의 머릿글은 &lt;th>로 마크업 했으며 scope속성을 제공하는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>2.4.1</td>
		<td class="align-l">콘텐츠가 논리적인 순서로 되어 있는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>3.1.1</td>
		<td class="align-l">HTML 코드에 주언어 관련 속성(lang)이 선언되어 있는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>3.2.1</td>
		<td class="align-l">3초이상 자동으로 재생되는 음성을 제공할 경우, 사전에 제어가 가능한가?</td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cd">
		<td>3.3.1</td>
		<td class="align-l">콘텐츠와 배경간의 명도 대비는 4.5:1 이상이 되는가? (배경, 로고는 제외. 큰 글자(24px이상이거나 굵은 18.66px)는 3:1 이상)</td>
		<td></td>
		<td>O</td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>4.1.1</td>
		<td class="align-l">서비스 특성상 시간 제한이 있는 경우, 시간 제한이 있는 콘텐츠임을 사전에 공지하고 있으며 남은 시간에 대해 알려주고 있는가?</td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>4.2.1</td>
		<td class="align-l">자동으로 갱신되는 콘텐츠에 마우스 오버, 키보드 포커스 시 내용이 정지되는가? 또는 사용자가 제어할 수 있는 버튼(이전, 다음, 정지) 버튼을 함께 제공하고 있는가?</td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cd">
		<td>5.1.1</td>
		<td class="align-l">1초에 3회 이상 깜박거리는 콘텐츠를 제공하지는 않는가?</td>
		<td></td>
		<td>O</td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>6.1.1</td>
		<td class="align-l">마우스 이벤트(drag &amp; drop, mouseover 등)로 동작하는 기능은 키보드 만으로도 동일한 기능을 사용할 수 있는가?</td>
		<td>O</td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>6.2.1</td>
		<td class="align-l">키보드 포커스가 논리적인 순서로 이동하는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>6.3.1</td>
		<td class="align-l">키보드 포커스를 시각적으로 구별할 수 있는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>7.1.1</td>
		<td class="align-l">웹페이지의 제목이 웹브라우저의 제목으로 사용되었는가?</td>
		<td>O</td>
		<td></td>
		<td></td>
		<td>O</td>
	</tr>
	<tr class="cm ca">
		<td>7.1.2</td>
		<td class="align-l">프레임이 사용될 때 프레임의 제목이 title 속성 값에 제대로 반영이 되었는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td>O</td>
	</tr>
	<tr class="cm">
		<td>7.1.3</td>
		<td class="align-l">주요 콘텐츠 블록의 제목을 &lt;h1>~&lt;h6>로 마크업했는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>7.2.1</td>
		<td class="align-l">반복되는 콘텐츠(메뉴 등)가 있을 경우 이를 건너뛸 수 있는 링크를 제공하며, 키보드로도 접근이 가능한가?</td>
		<td>O</td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>7.3.1</td>
		<td class="align-l">링크 텍스트가 단독으로 사용될 때도 정확한 의미 파악이 가능한가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>8.1.1</td>
		<td class="align-l">사용자가 의도하지 않은 기능(초점 변화, 서식 전송, 새 창, 팝업, 레이어)이 실행된 곳은 없는가?</td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>8.2.1</td>
		<td class="align-l">폼 콘트롤 요소에는 적절한 label을 제공하며, 폼 콘트롤 요소의 id값과 &lt;label>의 for값을 동일하게 제공하는가?</td>
		<td></td>
		<td></td>
		<td>O</td>
		<td>O</td>
	</tr>
	<tr class="ca">
		<td>8.3.1</td>
		<td class="align-l">사용자 입력 오류가 발생했을 시, 사용자에게 알려주고 수정이 필요한 곳에 포커스가 이동하는가?</td>
		<td></td>
		<td></td>
		<td></td>
		<td>O</td>
	</tr>
	<!--
	<tr class="cm">
		<td>2.3.4</td>
		<td class="align-l"><a href="2.3.4.html">(레벨 AA) 링크는 &lt;a>로, 서식 전송 버튼은 &lt;form> 태그 내에 &lt;button type="submit"> , &lt;input type="submit"> , &lt;input type="image"> 로 제공했는가?</a></td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>2.5.1</td>
		<td class="align-l"><a href="2.5.1.html">(레벨 AA) 플러그인 사용 시 플러그인 미지원환경을 위한 대체 콘텐츠와 안내 메세지를 제공하는가?</a></td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>2.6.1</td>
		<td class="align-l"><a href="2.6.1.html">(레벨 AA) 읽기 전용 목적의 워드, 한글, 파워포인트, PDF 파일이 제공된 경우 뷰어 설치 안내를 제공하는가?</a></td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>2.7.1</td>
		<td class="align-l"><a href="2.7.1.html">(레벨 AA) 마우스 우클릭 메뉴를 막지는 않았는가?</a></td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>2.7.2</td>
		<td class="align-l"><a href="2.7.2.html">(레벨 AA) 브라우저 기본 단축키와 중복되는 단축키를 사용하지는 않았는가?</a></td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr class="cm">
		<td>8.4.1</td>
		<td class="align-l"><a href="8.4.1.html">(레벨 AA) 텍스트 입력 박스에 특정 데이터의 입력을 요하는 경우, 유효한 값이 입력될 수 있도록 안내 텍스트를 미리 제공하고 있는가?</a></td>
		<td></td>
		<td></td>
		<td>O</td>
		<td></td>
	</tr>
	<tr class="cx">
		<td>8.5.1</td>
		<td class="align-l"><a href="8.5.1.html">(레벨 AA) 세션 만료 시, 재 인증 후에도 이전 동작을 무리 없이 수행할 수 있는가?</a></td>
		<td>O</td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	-->
</tbody>
</table>

<h3>주요 이슈</h3>

<h5>논리적 마크업</h5>
<ul class="notice-txt">
	<li>논리적으로 시멘틱하게 마크업한다. 의미에 맞는 태그를 사용하고, 적절한 하층구조를 가질 수 있도록 한다.</li>
	<li>디자인에 제목이 없더라도, 컨텐츠블록에 제목을 숨긴상태로 적절히 적용한다.</li>
	<li>html 문법에 어긋나지 않도록 유효성 검사를 병행한다. 기본적으로 명시해야 하는 속성들을 명시해준다.</li>
</ul>

<h5>탭메뉴 마크업 - 논리적 구조를 가진경우</h5>
<ul class="notice-txt">
	<li> 탭메뉴가 제목역할을 하며, 스크린리더나 링크이동시 논리적으로 이동한다</li>
</ul>
<pre class="brush: js">
&lt;ul>
	&lt;li>
		&lt;h5>&lt;a href="#none">탭메뉴1&lt;/a>&lt;/h5>
		&lt;div id="con1">탭컨텐츠1&lt;/div>
	&lt;/li>
	&lt;li>
		&lt;h5>&lt;a href="#none">탭메뉴2&lt;/a>&lt;/h5>
		&lt;div id="con2">탭컨텐츠2&lt;/div>
	&lt;/li>
	&lt;li>
		&lt;h5>&lt;a href="#none">탭메뉴3&lt;/a>&lt;/h5>
		&lt;div id="con3">탭컨텐츠3&lt;/div>
	&lt;/li>
&lt;/ul>
</pre>
<h5>탭메뉴 마크업 - 탭메뉴와 컨텐츠가 분리된 경우</h5>
<ul class="notice-txt">
	<li>컨텐츠의 양이 많을 경우 탭메뉴와 컨텐츠를 분리할 수 있다.</li>
	<li>탭에 대한 부가설명을 title 속성에 적용해준다</li>
	<li>탭메뉴의 href 속성에 해당 컨텐츠로 포커스가 이동하도록 해당 id로 링크를 걸어줘야 한다.</li>
	<li>해당 컨텐츠에 디자인적으로 제목이 없을 경우 탭메뉴와 동일한 숨긴제목을 제공한다</li>
</ul>
<pre class="brush: js">
&lt;ul title="탭메뉴1,탭메뉴2,탭메뉴3 모음">
	&lt;li>&lt;a href="#con1">탭메뉴1&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#con2">탭메뉴2&lt;/a>&lt;/li>
	&lt;li>&lt;a href="#con3">탭메뉴3&lt;/a>&lt;/li>
&lt;/ul>
&lt;div id="con1">
	&lt;h5>탭컨텐츠1 제목&lt;/h5>
	&lt;div>탭컨텐츠1&lt;/div>
&lt;/div>
&lt;div id="con2">
	&lt;h5>탭컨텐츠2 제목&lt;/h5>
	&lt;div>탭컨텐츠2&lt;/div>
&lt;/div>
&lt;div id="con3">
	&lt;h5>탭컨텐츠3 제목&lt;/h5>
	&lt;div>탭컨텐츠3&lt;/div>
&lt;/div>
</pre>

<h5>키보드만으로 사용가능</h5>
<ul class="notice-txt">
	<li>키보드만으로 사용 가능한지, 탭이동시 논리적으로 이동하는지 고려한다.</li>
	<li>마우스 이벤트가 있는 경우 키보드로 동일하게 기능사용이 가능해야한다.</li>
	<li>내부 스크롤(overflow:scroll)이 사용된 영역은 tabindex="0"을 주어 탭으로 접근하여 키보드로 스크롤 가능하도록 한다.</li>
</ul>

<h5>대체컨텐츠 및 부가설명</h5>
<ul class="notice-txt">
	<li>img의 alt 값을 적절하게 제공해준다.</li>
	<li>a 태그의 경우 감싸고 있는 텍스트만으로 설명이 충분하지 않을 경우 title 값을 따로 적용한다. 특히 새창으로 열릴때 '새창으로 이동'을 함께 적용해준다.</li>
	<li>alt,title로 설명이 부족한 복잡한 내용을 담은 이미지의 경우 숨긴텍스트, longdesc 등을 적용한다.(longdesc 보다는 숨긴텍스트 적용)</li>
	<li>동영상의 경우 자막이 함께 제공되어야 한다. 플레이어의 제어버튼을 키보드로 사용 가능해야 한다.</li>
	<li>차트,그리드 등이 사용된 곳에 대체컨텐츠가 함께 제공되어야 한다.</li>
</ul>

<h5>데이타테이블</h5>
<ul class="notice-txt">
	<li>table의 구조화 - colgroup,col,thead,tbody,tfoot,th,td 등의 태그를 적절히 사용한다.</li>
	<li>table의 제목을 반드시 제공해준다. caption으로 제공하며 heading 요소로 대체 가능하다.</li>
	<li>summary 속성을 적절히 제공하며, 제목과는 내용이 상이해야 하며, th 값과 제목으로 적절히 표현한다.</li>
	<li>scope, headers, id 로 제목셀과 내용셀을 적절히 매칭시킨다.<br />
	※ scope는 제목셀과 내용셀을 행 또는 열 별로 매칭시키는 방법이고 headers는 제목셀과 내용셀을 각각 매칭 시킬때 씁니다.<br />
	headers로 연결된 곳은 scope를 삭제.
	</li>
	<li>1:1 매칭의 가로 뷰 테이블은 all td만을 사용하여 레이아웃 테이블로 제공해도 무방하다. 이 경우 caption, summary역시 필요 없으므로 삭제</li>
	<li>th셀이 중복되는 구조의 데이터 테이블은 th/td셀 간의 headers/id 연결을 하여 제공해야 한다. 아니면 레이아웃 테이블 처리</li>
</ul>
<pre class="brush: js">
&lt;table cellspacing="0" summary="제목1,제목2,제목3,제목4,제목5의 순서로 테이블제목을 나타낸 표입니다">
	&lt;caption>테이블제목&lt;/caption>
	&lt;colgroup>
		&lt;col style="width:10%" />
		&lt;col style="width:10%" />
		&lt;col style="width:10%" />
		&lt;col style="width:10%" />
		&lt;col style="width:10%" />
	&lt;/colgroup>
	&lt;thead>
		&lt;tr>
			&lt;th scope="col">제목1&lt;/th>
			&lt;th scope="col">제목2&lt;/th>
			&lt;th scope="col">제목3&lt;/th>
			&lt;th scope="col">제목4&lt;/th>
			&lt;th scope="col">제목5&lt;/th>
		&lt;/tr>
	&lt;/thead>
	&lt;tfoot>
		&lt;tr>
			&lt;th scope="row">합계&lt;/th>
			&lt;td colspan="4">결과&lt;/td>
		&lt;/tr>
	&lt;/tfoot>
	&lt;tbody>
		&lt;tr>
			&lt;td>셀1&lt;/td>
			&lt;td>셀2&lt;/td>
			&lt;td>셀3&lt;/td>
			&lt;td>셀4&lt;/td>
			&lt;td>셀5&lt;/td>
		&lt;/tr>
		&lt;tr>
			&lt;td>셀11&lt;/td>
			&lt;td>셀21&lt;/td>
			&lt;td>셀31&lt;/td>
			&lt;td>셀41&lt;/td>
			&lt;td>셀51&lt;/td>
		&lt;/tr>
	&lt;/tbody>
&lt;/table>
</pre>
<pre class="brush: js">
&lt;table cellspacing="0" summary="제목1,제목2,제목3,제목4의 순서로 테이블제목을 나타낸 표입니다">
	&lt;caption>테이블제목&lt;/caption>
	&lt;colgroup>
		&lt;col style="width:25%" />
		&lt;col style="width:25%" />
		&lt;col style="width:25%" />
		&lt;col style="width:25%" />
	&lt;/colgroup>
	&lt;tbody>
		&lt;tr>
			&lt;th id="title1">제목1&lt;/th>
			&lt;td headers="title1">데이타1&lt;/td>
			&lt;th id="title2">제목2&lt;/th>
			&lt;td headers="title2">데이타2&lt;/td>
		&lt;/tr>
		&lt;tr>
			&lt;th id="title3">제목3&lt;/th>
			&lt;td headers="title3">데이타3&lt;/td>
			&lt;th id="title4">제목4&lt;/th>
			&lt;td headers="title4">데이타4&lt;/td>
		&lt;/tr>
	&lt;/tbody>
&lt;/table>
</pre>

<h5>온라인서식</h5>
<ul class="notice-txt">
	<li>form 태그는 action 속성을 필수로 가진다.</li>
	<li>textarea 태그는 col 및 row 속성을 필수로 가진다.</li>
	<li>컨텐츠 구조상 input 태그를 설명하는 텍스트가 1:1로 명확하게 존재할 경우 텍스트를 label 태그로 짝지어준다.</li>
	<li>label 적용이 애매할 경우 input에 title 속성을 적용해준다.</li>
	<li>유사한 컨트롤은 filedset 태그로 그룹화 시켜준다.</li>
</ul>
<pre class="brush: js">
&lt;form action="">
&lt;fieldset>
	&lt;legend>로그인&lt;/legend>
	&lt;label for="id1">아이디&lt;/label>&lt;input type="text" id="id1" />
	&lt;label for="id2">비밀번호&lt;/label>&lt;input type="password" id="id2" />
	&lt;input type="submit" value="로그인" title="로그인하기" />
&lt;/fieldset>
	
&lt;fieldset>
	&lt;legend>선택&lt;/legend>
	&lt;input type="radio" name="ra1" id="ra1" />&lt;label for="ra1">라디오1&lt;/label>
	&lt;input type="radio" name="ra1" id="ra2" />&lt;label for="ra2">라디오2&lt;/label>
	&lt;input type="checkbox" name="chk1" id="chk1" />&lt;label for="chk1">체크1&lt;/label>
	&lt;input type="checkbox" name="chk2" id="chk2" />&lt;label for="chk2">체크2&lt;/label>
	&lt;select title="콤보박스">
		&lt;option value="1">1&lt;/option>
		&lt;option value="2">2&lt;/option>
		&lt;option value="3">3&lt;/option>
	&lt;/select>
&lt;/fieldset>

&lt;fieldset>
	&lt;legend>&lt;/legend>
	&lt;input type="image" src="url" alt="대체텍스트" />
	&lt;textarea cols="10" rows="3" title="멀티텍스트">멀티텍스트&lt;/textarea>
&lt;/fieldset>
&lt;/form>
</pre>
<p>* 온라인 서식이 많은 경우 레이블 보다는 모두 title로 제공해 주는 것이 개발에 편리합니다.<br />
단, 라디오버튼, 체크박스는 반드시 텍스트가 옆에 있기 마련이므로 해당 텍스트를 명시적인 레이블로 묶는 방법을 사용해 주는 것이 좋습니다.</p>


<? include "$_SERVER[DOCUMENT_ROOT]/_guide/coding/inc_foot.html"; ?>